@charset 'utf-8';
$font-size:40px;
@function h($px) {
    @return $px/$font-size*1rem;
}
.web {
    width: 100%;
    min-height: 100%;
    background: url(../images/diwen.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;   
    position: relative;
    .sugar{
        width: 100%;
        height: 100%;
    }
    .musicbutton {
        width: h(50px);
        height: h(50px);
        position: absolute;
        z-index: 9999;
        top: h(30px);
        right: h(30px);
        background: #E7C598;
        line-height: h(50px);
        border-radius: 50%;
        animation: mu 4s infinite;
        @-webkit-keyframes mu {
            from {
                transform: rotateZ(0);
            }
            to {
                transform: rotateZ(360deg);
            }
        }
        .iconfont {
            display: block;
            font-size: h(35px);
            color: #BF0C21;
        }
    }
    .bg {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -9999;
    }
    .guest-seat {
        padding-top: h(130px);
        padding-bottom: h(45px);
        .content {
            width: h(120px);
            height: h(120px);
            border-radius: 50%;
            background: #E7C598;
            margin: 0 auto;
            text-align: center;
            line-height: h(120px);
            position: relative;
            span {
                display: block;
                width: 100%;
                height: 100%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            p {
                font-size: h(20px);
                color: #BF0C21;
                letter-spacing: h(3px);
            }
            .big {
                width: h(50px);
                height: h(50px);
                background: #E7C598;
                border-radius: 50%;
                text-align: center;
                line-height: h(50px);
                position: absolute;
                font-size: 0;
                .iconfont {
                    font-size: h(14px);
                    color: #BF0C21;
                }
            }
            .seat1 {
                left: h(38px);
                top: h(-60px);
            }
            .seat2 {
                top: h(-10px);
                right: h(-50px);
            }
            .seat3 {
                top: h(84px);
                right: h(-50px);
            }
            .seat4 {
                left: h(38px);
                bottom: h(-60px);
            }
            .seat5 {
                top: h(84px);
                left: h(-50px);
            }
            .seat6 {
                top: h(-10px);
                left: h(-50px);
            }
        }
    }
    .seat {
        box-sizing: border-box;
        padding-left: h(84px);
        padding-right: h(84px);
        .section {
            width: 50%;
            text-align: center;
            box-sizing: border-box;
            padding-bottom: h(55px);
            padding-top: h(55px);
            .content {
                width: h(90px);
                height: h(90px);
                border-radius: 50%;
                background: #E7C598;
                position: relative;
                text-align: center;
                line-height: h(90px);
                margin: 0 auto;
                span {
                    display: block;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                p {
                    font-size: h(16px);
                    color: #BF0C21;
                }
                .add {
                    font-size: h(80px);
                }
                .seat1,
                .seat2,
                .seat3,
                .seat4,
                .seat5,
                .seat6 {
                    width: h(36px);
                    height: h(36px);
                    background: #E7C598;
                    border-radius: 50%;
                    text-align: center;
                    line-height: h(36px);
                    position: absolute;
                    font-size: 0;
                    .iconfont {
                        font-size: h(15px);
                        color: #BF0C21;
                    }
                }
                .seat1 {
                    top: h(-42px);
                    left: h(26px);
                }
                .seat2 {
                    top: h(-7px);
                    right: h(-35px);
                }
                .seat3 {
                    top: h(60px);
                    right: h(-35px);
                }
                .seat4 {
                    left: h(26px);
                    bottom: h(-42px);
                }
                .seat5 {
                    top: h(60px);
                    left: h(-35px);
                }
                .seat6 {
                    top: h(-7px);
                    left: h(-35px);
                }
            }
        }
    }
    .bottom {
        margin-top: h(80px);
        height: h(88px);
        position: relative;
        .img {
            width: 100%;
            margin: 0 auto;
            position: absolute;
            bottom: h(64px);
            left: 50%;
            transform: translateX(-50%);
            p {
                font-size: h(24px);
                color: #E7C598;
                em {
                    position: relative;
                    display: inline-block;
                    width: h(27px);
                    &::after {
                        content: "";
                        display: block;
                        width: 100%;
                        height: h(1px);
                        background: #E7C598;
                        position: absolute;
                        top: 130%;
                        left: 0;
                    }
                }
            }
        }
        .home {
            width: h(41px);
            height: h(41px);
            text-align: center;
            line-height: h(41px);
            border-radius: 50%;
            background: #E7C598;
            position: fixed;
            right: h(56px);
            bottom: h(60px);
            font-size: 0;
            a {
                font-size: h(30px);
                color: #BF0C21;
            }
        }
    }
    .bei {
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        @-webkit-keyframes bei {
            from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        .con {
            width: h(414px);
            height: h(250px);
            border-radius: h(10px);
            background: #E7C598;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            box-sizing: border-box;
            padding-top: h(32px);
            a {
                display: block;
                width: h(222px);
                height: h(38px);
                border-radius: h(10px);
                background: #BF0C21;
                text-align: center;
                line-height: h(38px);
                font-size: h(21px);
                color: #E7C598;
                margin: 0 auto;
            }
            .a_one {
                margin-top: h(20px);
            }
            .a_two {
                margin-top: h(12px);
            }
            .a_three {
                margin-top: h(12px);
            }
            p {
                font-size: h(20px);
                color: #BF0C21;
                em {
                    display: inline-block;
                    position: relative;
                    width: h(42px);
                    &::after {
                        content: "";
                        display: block;
                        width: 100%;
                        height: h(1px);
                        position: absolute;
                        top: 130%;
                        left: 0;
                        background: #BF0C21;
                    }
                }
            }
            .iconfont {
                position: absolute;
                right: h(16px);
                top: h(14px);
                font-size: h(36px);
                color: #BF0C21;
            }
        }
    }
}